<template>
  <div id="wordMap" ref="wordMap"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts/lib/echarts';
import { mapZHName } from '@/utils/mapToZh';
import { beginCircle } from '@/utils/imgBase64'
require("@/utils/echarts-map-world");

import {
  ref,
  defineProps,
  defineEmits,
  defineExpose,
  onMounted,
  getCurrentInstance,
  nextTick,
} from "vue";

const { proxy, ctx } = getCurrentInstance() as any;
const wordEachrt = ref(null);
const wordMap = ref();

onMounted(() => {
  initWordMapEchart();
});

// 初始化世界地图
function initWordMapEchart() {
  wordEachrt.value = echarts.init(wordMap.value);

  const option = {
    // grid: {
    //   top: "10%",
    //   left: "100%",
    //   right: "0",
    // },
    geo: {
      map: "world",
      roam: false, //开启鼠标缩放和漫游
      zoom: 1, //地图缩放级别
      selectedMode: false, //选中模式：single | multiple
      left: 10,
      right: 10,
      top: 10,
      bottom: 10,
      // layoutCenter: ["30%", "60%"], //设置后left/right/top/bottom等属性无效
      layoutSize: "100%",
      label: {
        normal: {
          formatter: function (params: any) {
            const znName = mapZHName?.[params?.name];
            return znName;
          },
          show: false,
          color: '#12f6ff'
        },
        emphasis: {
          show: true
        },
      },
      itemStyle: {
        normal: {
          areaColor: "#0b1d3c",
          borderWidth: 1.6,
          borderColor: "#0487c1"
        },

        emphasis: {
          areaColor: "#069",
        },
      },
    },

    series: [
      {
        top: "100%",
        type: 'lines',
				zlevel: 3,
        symbol: [beginCircle, beginCircle], // 终止标记为空，结束标志为箭头
        symbolSize: 30, // 圆形的直径
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
					symbol: 'arrow', //箭头图标
					symbolSize: 10, //图标大小
          color: '#00f4ff'
				},

				lineStyle: {
					normal: {
						width: 4, //尾迹线条宽度
						opacity: 1, //尾迹线条透明度
						curveness: .3, //尾迹线条曲直度
            color: '#03a2ba'
					}
				},
        data: [
          {
            coords: [
              [10, 35.758255],  // 终点经纬度
              [116.405285, 39.904989], // 起点经纬度
            ],
          }
        ]
      }
    ]
  };

  wordEachrt.value?.setOption(option);

  window.addEventListener("resize", () => {
    wordEachrt.value?.resize();
  });
}

// 对外提供方法
defineExpose({});
</script>

<style scoped lang="scss">
.wordMap {
  height: 100%;
}

#wordMap {
  width: 100%;
  height: 100%;
}
</style>
